<div ng-if="conf.isShow">
<div class="outer-container" >
</div>
<div class="inner-conatiner" style="padding-top:0px">
    <div class="inner-title clearfix">
        <p class="inner-title-left">最多只能选择1项 </p>
        <p  class="inner-title-left clearfix" ng-show="isShowcurrentSelect()"><a class="job-current-select" > <span ng-bind="selectDetail.pdcName" ></span>
            <img style="display:block;float:right;margin-top:7px" src="them/images/compImages/delete-white.png" ng-click="removeItem()" alt="移除" /></a>
            </a></p>
        <p class="inner-title-right"><a class="comp-ok-btn" ng-click="chooseOk()"></a><a class="comp-cancel-btn" ng-click="chooseCancel()"></a></p>
    </div>
    <div class="inner-box clearfix">
        <div class="inner-box-l">
            <p class="inner-box-list text-overflow" ng-repeat="item in majorTopCategory" ng-bind="item.mdcName" ng-class="selectTop ==item?'addBackground':''" ng-click="clickTop(item)"> </p>
        </div>
        <div class="inner-box-r">
            <div ng-repeat="item in tableData" >
                <div class="table-row clearfix">
                    <p class="inner-box-detail-item text-overflow"  ng-repeat="childItem in item" ng-bind="childItem.mscName" ng-click="clickSec($event,childItem,$index,$parent.$index)"> </p>
                </div>
                <div ng-if="showDetail[$index]" class="detail-box clearfix" style="position: relative;">
                  <div ng-style="offsetStyle"><div class="f-triangle-up-inner"></div>
                    <div class="f-triangle-up-out"></div></div>
                    <a class="detail-box-item" ng-repeat="item in majorProfessionCategory track by $index" ng-bind="item.pdcName" ng-click="clickMarjorItem($event,item)">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<style>
    .job-current-select{
        display: block;
        float: left;
        font-size: 12px;
        margin-left: 10px;
        background: #00AAFE;
        height: 30px;
        color: #fff;
        line-height: 30px;
        margin-top: 8px;
        padding-left: 5px;
        padding-right: 5px;
    }
    /*三角形 设定*/
    .f-triangle-up-out {
        position: absolute;
        top: -9px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid #ddd;
    }
    .f-triangle-up-inner {
        position: absolute;
        top: -7px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid #fff;
        z-index: 1;
    }


    .outer-container{
        position: fixed;
        top:0;
        left: 0;
        opacity: 0.5;
        width:100%;
        height:100%;
        background: #000;
        z-index: 3004;
    }
    .inner-conatiner{
        position: fixed;
        top: 100px;
        left: 200px;
        width: 790px;
        height: 310px;
        background: #fff;
        opacity: 1;
        z-index: 3004;
        font-size: 14px;
        color: #000;
        padding: 10px 0px 30px 0px;
        box-shadow: 0px 0px 2px #000;
        border-radius: 1px;
    }
    .inner-title{
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        color: #000;
        padding-left:15px;
        background:#EDEDED;
        border-bottom: 1px solid #ddd;
    }

    .inner-title-left{
        float:left;
    }
    .inner-title-right{
        float: right;
        margin-top: 14px;
    }
    .inner-title-right>a{
        float:left;
        display: block;
        width:20px;
        height:20px;
        cursor: pointer;
    }
    .comp-ok-btn{
        background:url("them/images/compImages/Ok.png")no-repeat;
    }
    .comp-cancel-btn{
        background:url("them/images/compImages/delete-1.png")no-repeat;
    }
    .inner-box{
        width: 100%;
        height: 290px;
    }
    .inner-box-l{
        float:left;
        width: 180px;
        height: 293px;
        overflow-y: auto;
        background: #EDEDED;
    }
    .inner-box-r{
        float: left;
        height: 293px;
        width: 610px;
        overflow:auto;
    }
    .inner-box-list{
        height:35px;
        width: 145px;
        cursor: pointer;
        line-height: 35px;
        padding-left: 20px;
    }
    .inner-box-detail-item{
        width: 175px;
        float:left;
        font-size:12px;
        cursor: pointer;
        margin-left:20px;
        height: 35px;
        line-height: 35px;
    }
    .addBackground{
        background:#fff;
        color:#00AAFE;
    }
    .table-row {
        height:35px;
        width:100%
    }
    .detail-box{
        width: 95%;
        min-height: 35px;
        margin: 0 auto;
        margin-top:5px;
        font-size: 12px;
        border: 1px solid #ddd;
    }
    .detail-box-item{
        display: block;
        padding-left:5px;
        padding-right:5px;
        line-height: 35px;
        margin-left: 20px;float:left;
    }
</style>